<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body {
			background: #f3f2f3;
		}
		#main {
			border: 1px solid red;
			width: 1225px;
			margin: 0 auto;
		}
		.list {
			width: 245px;
			float: left;
		}
		.loadmore {
			position: fixed;
			width: 200px; height: 30px;
			left: 50%;
			margin-left: -100px;
			bottom: 10px;
		}
	</style>
</head>
<script src="scripts/ajax.js"></script>
<body>
	<div id="main">
		<div class="list a"></div>
		<div class="list b"></div>
		<div class="list c"></div>
		<div class="list d"></div>
		<div class="list e"></div>
	</div>
	<input type="button" class="loadmore" id="" value="加载图片" onclick="loadData();" />

	<script type="text/javascript">
		let list = Array.from(document.getElementsByClassName("list"));
		// var containers =  Array.prototype.slice.call(document.getElementById("main").children);
		function loadData() {
			ajax({
				url: "waterfall",
				dataType: "json",
				success: function (imgs) {
					imgs.forEach(img => {
						let oImg = document.createElement("img");
						oImg.src = img.src;
						oImg.height = img.height;
						let minIndex = getMinIndex();
						list[minIndex].appendChild(oImg);
					});
				}
			})
		}

		function getMinIndex() {
			let minHeight = getHeight(list[0]);
			let minIndex = 0;
			for (let i = 1; i < list.length; i++) {
				let _height = getHeight(list[i]);
				if (_height < minHeight) {
					minHeight = _height;
					minIndex = i;
				}
			}
			return minIndex;
		}

		function getHeight(ele) {
			if (ele.children.length == 0) return 0;
			let sum = 0;
			for (let i = 0; i < ele.children.length; i++) {
				sum += Number(ele.children[i].height);
			}
			return sum;
		}
	</script>
</body>

</html>